<template>
  <div id="app" v-loading="listloading">
    <MyWschedule
      v-loading="listloading"
      :plan-list="DayList"
      :is-first-day-of-monday-or-sunday="7"
      @changeWeek="changeWeek"
    >
      <template v-slot:thing="{ row }">
        <div v-if="row.staff" ref="item" >
          <div>姓名:{{ row.staff.name }}</div>
          <div>职位:{{ row.staff.position }}</div>
          <div>开始时间:{{ row.shift.startTime }}</div>
          <div>结束时间:{{ row.shift.endTime }}</div>
        </div>
        <div v-else class="itemMessage">
          <div style="text-align: center">开放班次</div>
          <div>开始时间:{{ row.shift.startTime }}</div>
          <div>结束时间:{{ row.shift.endTime }}</div>
        </div>
      </template>
    </MyWschedule>
  </div>
</template>
  
  <script>
import MyWschedule from "./MyWschedule";
import { listWeekByEmp } from "@/api/shift";
export default {
  components: {
    MyWschedule,
  },
  data() {
    return {
      DayList: [],
      listloading: true,
      editStatus: false,
      editFormStatus: false,
      options: [],
      startTime: "",
      endTime: "",
      name: "",
      shiftObj: {
        id: "",
        shiftId: "",
        newStaffId: "",
        newStartTime: "",
        newEndTime: "",
      },
      temp: {},
    };
  },
  created() {
  },
  methods: {
    /**
     * 切换周
     * @param date
     */
    changeWeek(val) {
      const formatDate = new Date(val.date);
      const date = this.getEveryMonday(formatDate);
      const obj = {};
      obj.date = date; 
      this.getListByWeek(obj);
    },
    // 获取指定时间计算每周的周一日期
    getEveryMonday(realdate) {
      function getNextDate(date, day) {
        var dd = new Date(date);
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m =
          dd.getMonth() + 1 < 10
            ? "0" + (dd.getMonth() + 1)
            : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "-" + m + "-" + d;
      }
      const differentDays =
        realdate.getDay() - 1 == -1 ? 6 : realdate.getDay() - 1;
      // console.log("相差的",differentDays);
      const targetDate = getNextDate(realdate, -differentDays);
      // console.log("周一日期",targetDate);
      return targetDate;
    },
    // 获取周排班表
    getListByWeek(obj) {
      // console.log("个人对象",obj)
      this.listloading = true;
      listWeekByEmp(obj).then((res) => {
        // console.log("个人排班", res);
        if (res.returnValue == 1) {
          this.listloading = false;
          this.DayList = res.data;
          for (var item of res.data) {
            if(item.dayShiftList!=undefined){
            for (var dayShiftList of item.dayShiftList) {
              dayShiftList.shift.startTime =
                dayShiftList.shift.startTime.split(" ")[1];
              dayShiftList.shift.endTime =
                dayShiftList.shift.endTime.split(" ")[1];
              dayShiftList.date = item.date;
            }
          }
        }
        } else {
          this.$notify({
            title: "Error",
            message: res.msg,
            type: "error",
            duration: 2000,
          });
          this.DayList = [];
          this.listloading = false;
        }
      });
    },
  },
};
</script>
  <style>
.rosterForm {
  width: 80%;
  height: 60%;
  position: absolute;
  left: calc(50%);
  top: calc(50%);
  transform: translateX(-50%) translateY(-70%);
}
.startTime {
  display: flex;
}
.hover:hover{
  cursor: pointer;
}
</style>
  